<template>

  <div style="display: flex">
    <div v-for="item in fruitArr">
      {{item.text}}: <input type="radio" name="fruit" :value=item v-model="checkValue" />
    </div>
  </div>
  <div style="margin-top: 10px">
    您选择的水果是: {{checkValue.text}}  {{checkValue.value}}
  </div>
</template>

<script setup>
import {ref, reactive, watch} from 'vue';

const checkValue = ref(0);

const fruitArr = reactive([
  {
    text: '苹果',
    value: 1
  },
  {
    text: '橙子',
    value: 2
  },
  {
    text: '菠萝',
    value: 3
  }
]);

// 监听单选框值的修改
watch(checkValue, (newVal, oldVal) => {
  console.log(newVal, oldVal);
})



</script>


<style>

</style>
